<template>
  <div class="DiaryHeader">
    <div class="timer">
      <div class="year">{{diarymsg.year}}</div>
      <div class="week">{{diarymsg.week}}</div>
    </div>
    <div class="weather-category">今天天气</div>
    <div class="weather-Radio">
      <div style="margin-top: 20px">
        <el-radio-group v-model="diarymsg.radioWeather" size="medium">
          <el-radio-button label="icon-qingtian/晴天"></el-radio-button>
          <el-radio-button label="icon-tianqi/小雨"></el-radio-button>
          <el-radio-button label="icon-duoyun/多云"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="diary-category">笔记类型</div>
    <div class="diary-Radio">
      <div style="margin-top: 20px">
        <el-radio-group v-model="diarymsg.category" size="medium">
          <el-radio-button label="学习"></el-radio-button>
          <el-radio-button label="工作"></el-radio-button>
          <el-radio-button label="日常"></el-radio-button>
          <el-radio-button label="其它"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="elbtn-suc">
         <el-button type="primary" icon="el-icon-circle-check" @click="confirm">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
    props:['methon'],
  components: {},
  data() {
    return {
        diarymsg:{
        year: new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate(),
        radioWeather:'icon-qingtian/晴天',
        category:'学习',
        week:'',
        }
    };
  },
  //监听属性 类似于data概念
  computed: {
    week(){
      let num=new Date().getDay();
      let weekarr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六',]
      return weekarr[num]
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    confirm(){
        this.$store.commit("ADDDIARYITEM",this.diarymsg);
        this.methon();
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.diarymsg.week=this.week;
  },
};
</script>
<style lang='css' scoped>
.timer {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid;
}
.weather-category ,.diary-category{
    padding: 10px 10px 0;
    font-size: 18px;
    font-weight: 600;
    position: relative;
}
.weather-category::after,.diary-category::after {
    content: "";
    position: absolute;
    height: 22px;
    border: 2px solid #2e3cbb;
    top: 10px;
    left: 0;
}
.elbtn-suc {
    display: flex;
    margin-top: 10px;
    justify-content: center;
}
</style>